<template>
  <div>
    <el-table
      v-loadmore="myLoad"
      size="large"
      :data="data.resource"
      max-height="530"
      style="width: 100%"
    >
    <template #empty>
      <el-skeleton v-if="isLoading" :rows="5" animated />
      <span v-else>暂无数据</span>
    </template>
    <el-table-column
      :fixed="isPhone"
      label="发布时间"
      sortable
      prop="createdAt"
    >
      <template #default="scope">
        {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD') }}
      </template>
    </el-table-column>
    <el-table-column
      :fixed="isPhone"
      label="更新时间"
      sortable
      prop="updatedAt"
    >
      <template #default="scope">
        <span v-if="scope.row.updatedAt != null">{{
          scope.row.updatedAt
        }}</span>
      </template>
    </el-table-column>
    <el-table-column min-width="100" label="技术标签" prop="resourceType.name">
      <template #default="scope">
        <el-tag class="ml-2" type="success">{{
          scope.row.resourceType.name
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column min-width="300" label="资源名称" prop="title" />
    <el-table-column min-width="150" :fixed="isPhone" align="center">
      <template #header>
        <div style="display: flex; align-items: center">
          <el-select
            size="small"
            style="width: 40%"
            @change="myChange"
            v-model="value"
            clearable
            placeholder="全部资源"
          >
            <el-option
              v-for="(item, index) in data.tagType"
              :key="item.index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            :prefix-icon="Search"
            v-model="data.search"
            @keyup.enter.native="mySearch"
            size="small"
            placeholder="Type to search"
          />
        </div>
      </template>
      <template #default="scope" v-if="isMyself">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除
        </el-button>
        <el-button size="small" @click="handleShow(scope.row.link)"
          >查看
        </el-button>
      </template>
      <template #default="scope" v-else>
        <el-button size="small" @click="handleShow(scope.row.link)"
          >查看
        </el-button>
      </template>
    </el-table-column>
    <template #append>
      <p v-if="isLoading">
        <el-divider content-position="center">加载中...</el-divider>
      </p>
      <p v-if="isNot">
        <el-divider content-position="center">到底了</el-divider>
      </p>
    </template>
    </el-table>
    <el-dialog
      v-model="currentArticl.centerDialogVisible"
      title="确认删除这个资源吗 ?"
      width="30%"
      :before-close="handleClose"
    >
      <div>{{ currentArticl.title }}</div>
      <br /><br />
      <span slot="footer" class="dialog-footer">
        <el-button @click="currentArticl.centerDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="ConfirmDel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { inject, onMounted, reactive, ref } from 'vue'
import axios from '../../utils/Axios'
import dayjs from 'dayjs'
import { Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useStore } from '@/store'
import Base from '@/api/base.js'
import { getTouristResource, searchTouristResource } from '@/api/tourist'

const userStore = useStore()

const route = useRoute()
const router = useRouter()

const isPhone = inject('isPhone')
const isLoading = ref(true)
const isNot = ref(false)
const isMyself = inject('isMyself')
const value = ref('')
const data = reactive({
  resource: [],
  resourceType: [],
  tagType: [],
  search: '',
  beg: 1,
  end: 10,
  index: 0,
  yeshu: 1,
  deleteId: 0,
})
onMounted(() => {})

getArticle()

function getArticle() {
  isLoading.value = true
  isNot.value = false
  getTouristResource({
    beg: data.beg,
    end: data.end,
    index: data.index,
    id: route.params.id || userStore.userInfo.id,
  }).then(res => {
    console.log(res)
    data.resource = res.data.resource
    data.resourceType = res.data.resourceType
    data.tagType = data.resourceType.map(item => {
      return { label: item.name, value: item.id + '' }
    })
    isLoading.value = false
    if (0 < data.resource.length && data.resource.length < data.yeshu * 10) {
      isNot.value = true
    }
  })
}


const handleEdit = (index, row) => {
  // console.log(row.id)
  router.push({
    path: '/editResource',
    query: {
      id: row.id,
    },
  })
}
const handleShow = link => {
  window.open(link)
}
const currentArticl = reactive({
  centerDialogVisible: false,
  title: '',
  id: null,
})
const handleDelete = (index, row) => {
  data.deleteId = index
  currentArticl.title = row.title
  currentArticl.id = row.id
  currentArticl.centerDialogVisible = true
}
function ConfirmDel() {
  axios.delete(`${Base.delUserResource}/${currentArticl.id}`).then(res => {
    if (res.success) {
      currentArticl.centerDialogVisible = false
      data.resource.splice(data.deleteId, 1)
    } else {
      currentArticl.centerDialogVisible = false
      ElMessage({
        message: '删除失败',
        type: 'error',
      })
    }
  })
}
function myChange(val) {
  if (val == '') {
    val = 0
  }
  data.yeshu = 1
  data.index = val
  getArticle()
}

function mySearch() {
  // console.log('hello')
  if (data.search == '') {
    ElMessage({
      showClose: true,
      message: '请输入关键字',
      type: 'error',
    })
  } else {
    getSearchData()
  }
}

function getSearchData() {
  isLoading.value = true
  isNot.value = false
  searchTouristResource({
    value: data.search,
    id: route.params.id || userStore.userInfo.id,
    // route.params.id || store.state.userInfo.id
  }).then(res => {
    data.resource = res.data
    isLoading.value = false
    if (0 < data.resource.length && data.resource.length < data.yeshu * 10) {
      isNot.value = true
    }
  })
}
const myLoad = () => {
  if (!isNot.value) {
    if (data.search == '') {
      data.end += 10
      data.yeshu++
      getArticle()
    } else {
      data.end += 10
      data.yeshu++
      getSearchData()
    }
  }
}

function handleClose(done) {
  currentArticl.centerDialogVisible = false
  done()
}
</script>

<style scoped></style>
